<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Example: DataTable - Basic Table (YUI Library)</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/reset/reset.css">
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/fonts/fonts.css">
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/logger/assets/logger.css">
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/datatable/assets/datatable.css">
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/container/assets/container.css">
    <link rel="stylesheet" href="../../../build/extras/satyam/assets/rowEdit.css">
	
    <style type="text/css">
      /* custom css*/
      #elDataTable {margin:1em;}
      #elDataTable table {border-collapse:collapse;}
      #elDataTable th, #basic td {border:1px solid #000;padding:.25em;}
      #elDataTable th {background-color:#696969;color:#fff;} /*dark gray*/
      #elDataTable .yui-dt-odd {background-color:#eee;} /*light gray*/
      #elDataTable em {font-style:italic;}
      #elDataTable strong {font-weight:bold;}
      #elDataTable .big {font-size:136%;}
      #elDataTable .small {font-size:77%}
    </style>
	
  </head>
  <body>

    <div id="elDataTable"></div>
	
	<hr />

    <div id="elRowEdit"></div>
	
    <div id="elScripts">
      <script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      <script src="http://yui.yahooapis.com/2.2.2/build/logger/logger-min.js"></script>
      <script src="http://yui.yahooapis.com/2.2.2/build/container/container-min.js"></script>
      <script src="http://yui.yahooapis.com/2.2.2/build/datasource/datasource-beta-min.js"></script>
      <script src="http://yui.yahooapis.com/2.2.2/build/datatable/datatable-beta-min.js"></script>
      <script src="../../../build/extras/satyam/rowEdit.js" type="text/javascript"></script>
      <script type="text/javascript">
        YAHOO.example.Data = {};
        YAHOO.example.Data.bookorders = [
            {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing"},
            {id:"po-0297", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life"},
            {id:"po-0783", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud"},
            {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice"}
        ];

        var my = {};

        my.oLogger = new YAHOO.widget.LogReader();

        my.oColumnHeaders = [
            {key:"id", sortable:true, resizeable:true, editor:"textbox"},
            {key:"date", type:"date", sortable:true, resizeable:true, editor:"textbox"},
            {key:"quantity", type:"number", sortable:true, resizeable:true, editor:"textbox"},
            {key:"amount", type:"currency", sortable:true, resizeable:true, editor:"textbox"},
            {key:"title", type:"html", sortable:true, resizeable:true, editor:"textbox"}
        ];

        my.oColumnSet = new YAHOO.widget.ColumnSet(my.oColumnHeaders);

        my.oDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
        my.oDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        my.oDataSource.responseSchema = {
            fields: ["id","date","quantity","amount","title"]
        };

        my.oDataTable = new YAHOO.widget.DataTable("elDataTable", my.oColumnSet, my.oDataSource,{caption:"Example: Basic Table"});
      </script>

      <script type="text/javascript">
        my.oDataTable.createEditForm("elRowEdit");
        my.oDataTable.showEditForm(my.oDataTable.getRecordSet()._records[0]);
      </script>
    </div>
  </body>
</html>
